<template>
  <div class="box_warp2">
    <div class="box_warp2_con">
      <div class="btn-box">
        <div
          class="btn btn1"
          :class="{ check: activeTab === 1 }"
          @click="activeTab = 1"
        >
          <span>{{ lang.daily_tab }}</span>
        </div>
        <div
          class="btn btn2"
          :class="{ check: activeTab === 2 }"
          @click="activeTab = 2"
        >
          <span>{{ lang.deadline_tab }}</span>
          <div class="time">
            <NuxtImg
              src="/images/activity/daily-checkin/time.png"
              alt=""
              width="12"
              height="12"
            />
            0h:26m:38s
          </div>
        </div>
      </div>
      <div class="con">
        <div v-for="(task, index) in tasksData" :key="index" class="cumu">
          <div class="text">
            {{ task.description }}
            <span>({{ task.current }}/{{ task.target }})</span>
          </div>
          <div class="bottom">
            <div class="img_box">
              <div
                v-for="(reward, rewardIndex) in task.rewards"
                :key="rewardIndex"
              >
                <NuxtImg
                  class="xz"
                  :src="reward.iconSrc"
                  alt=""
                  width="30"
                  height="30"
                />
                {{ reward.amount }}
              </div>
            </div>
            <div class="btn state0" v-click-move @click="handleClick(task)">
              {{ task.buttonText }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/daily-checkin");
const userStore = useUserStore();

const activeTab = ref(1);

const handleClick = (task: any) => {
  if (task.btnType === 1) {
    userStore.changeShowCarteira(true);
  } else {
    navigateTo({ name: "home" });
  }
};

const tasksData = ref([
  {
    description: lang.load_any_value,
    current: 0,
    target: 1,
    rewards: [
      { iconSrc: "/images/activity/daily-checkin/box-g.png", amount: 2 },
      { iconSrc: "/images/activity/daily-checkin/icon-coin3.png", amount: 1.5 },
    ],
    btnType: 1,
    buttonText: lang.deposit_btn,
  },
  {
    description: `${lang.load_total_amount} ${lang.moneyUnit}100`,
    current: 0,
    target: 100,
    rewards: [
      { iconSrc: "/images/activity/daily-checkin/box-g.png", amount: 3 },
      { iconSrc: "/images/activity/daily-checkin/icon-coin3.png", amount: 2 },
    ],
    btnType: 1,
    buttonText: lang.deposit_btn,
  },
  {
    description: `${lang.daily_bet_reaches} ${lang.moneyUnit} 200`,
    current: 0,
    target: 200,
    rewards: [
      { iconSrc: "/images/activity/daily-checkin/box-g.png", amount: 2 },
      { iconSrc: "/images/activity/daily-checkin/icon-coin3.png", amount: 1 },
    ],
    btnType: 2,
    buttonText: lang.play_games,
  },
  {
    description: `${lang.daily_bet_reaches} ${lang.moneyUnit}1000`,
    current: 0,
    target: 1000,
    rewards: [
      { iconSrc: "/images/activity/daily-checkin/box-g.png", amount: 3 },
      { iconSrc: "/images/activity/daily-checkin/icon-coin3.png", amount: 2 },
    ],
    btnType: 2,
    buttonText: lang.play_games,
  },
]);
</script>

<style scoped lang="scss">
.box_warp2 {
  margin-top: 0.25rem;
  padding: 0.2rem;
  color: #fff;

  .box_warp2_con {
    background: var(--theme-color4);
    border-radius: 0.3rem;
    padding: 0.32rem;

    .btn-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.3rem;

      .btn {
        height: 1.2rem;
        font-size: var(--font-title);
        color: var(--theme-neutral2);
        background: var(--theme-color10);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 0.2rem;
        position: relative;

        span {
          position: relative;
          z-index: 2;
        }

        &:before {
          content: "";
          height: 100%;
          width: 50%;
          position: absolute;
          right: -0.5rem;
          bottom: 0;
          background: var(--theme-color10);
          transform: skew(30deg);
          border-radius: 0.2rem;
        }

        &.check {
          color: var(--theme-neutral1);
          background: linear-gradient(
            360deg,
            var(--theme-main-gradient1) 0%,
            var(--theme-main-gradient2) 100%
          );

          &:before {
            background: linear-gradient(
              360deg,
              var(--theme-main-gradient1) 0%,
              var(--theme-main-gradient2) 100%
            );
          }
        }

        &.btn2 {
          background: var(--theme-color10);

          &:before {
            left: -0.5rem;
            bottom: 0rem;
          }
        }
      }
    }

    .time {
      width: 3.2rem;
      height: 0.6rem;
      border-radius: 2rem;
      padding: 0 0.25rem;
      margin-top: -0.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      font-size: 0.32rem;
      z-index: 2;

      img {
        width: 0.3rem;
        margin-right: 0.05rem;
      }
    }
    .con {
      margin-top: 0.25rem;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 0.2rem;

      .cumu {
        min-height: 2rem;
        background: var(--theme-color3);
        border-radius: 0.2rem;
        padding: 0.3rem;

        .text {
          font-size: 0.34rem;

          span {
            color: var(--theme-dec4);
          }
        }

        .bottom {
          margin-top: 0.15rem;
          height: 0.8rem;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .img_box {
            display: flex;
            align-items: center;
            font-size: 0.34rem;

            div {
              display: flex;
              align-items: center;

              &:nth-of-type(1) {
                margin-right: 0.5rem;
              }

              img {
                width: 0.75rem;
                height: 0.75rem;
                margin-right: 0.2rem;
              }
            }
          }

          .btn {
            width: 2.4rem;
            height: 100%;
            background: var(--theme-color10);
            border-radius: 2rem;
            font-size: 0.38rem;
            display: flex;
            align-items: center;
            justify-content: center;

            &.state1,
            &.state0 {
              background: linear-gradient(
                360deg,
                var(--theme-main-gradient1) 0%,
                var(--theme-main-gradient2) 81%
              );
            }
          }
        }
      }
    }
  }
}
.box_warp2 .box_warp2_con .btn-box .check {
  color: var(--theme-neutral1);
  background: linear-gradient(
    360deg,
    var(--theme-main-gradient1) 0%,
    var(--theme-main-gradient2) 100%
  ) !important;
}
.box_warp2 .box_warp2_con .btn-box .check:before {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  right: -0.5rem;
  bottom: 0;
  background: linear-gradient(
    360deg,
    var(--theme-main-gradient1) 0%,
    var(--theme-main-gradient2) 100%
  );
  transform: skew(30deg);
  border-radius: 0.2rem;
}
</style>
